<script setup>
import useUserStore from "@/stores/userStore.js";
import { ref } from "vue";
import {
  CaretBottom,
  SwitchButton,
  User,
  Crop,
  EditPen,
} from "@element-plus/icons-vue";
import avatar from "@/assets/default.png";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "@/router/index.js";
import { useTokenStore } from "@/stores/token.js";

const userStore = useUserStore();
const tokenstore = useTokenStore();
const handleCommand = (command) => {
  if(userStore.info.studentId!=null){
    if (command === "logout") {
      ElMessageBox.confirm("你确认要退出吗？", "温馨提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(async () => {
            //退出登录
            //1.清空pinia中存储的token以及个人信息
            tokenstore.removeToken();
            userStore.removeInfo();
            //2.跳转到登录页面
            await router.push("/login");
            ElMessage({
              type: "success",
              message: "退出登录",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "用户取消了退出登录",
            });
          });
      // 这里可以添加更多的退出逻辑，例如跳转到登录页面等
    } else if (command === "info") {
      router.push("/student/students-info");
    } else if (command === "resetPassword") {
      router.push("/student/students-reset-password");
    }
  }else if(userStore.info.teacherId!=null){
    if (command === "logout") {
      ElMessageBox.confirm("你确认要退出吗？", "温馨提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(async () => {
            //退出登录
            //1.清空pinia中存储的token以及个人信息
            tokenstore.removeToken();
            userStore.removeInfo();
            //2.跳转到登录页面
            await router.push("/login");
            ElMessage({
              type: "success",
              message: "退出登录",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "用户取消了退出登录",
            });
          });
      // 这里可以添加更多的退出逻辑，例如跳转到登录页面等
    } else if (command === "info") {
      router.push("/teacher/teacher-info");
    } else if (command === "resetPassword") {
      router.push("/teacher/teacher-reset-password");
    }
  }else if(userStore.info.adminId!=null){
    if (command === "logout") {
      ElMessageBox.confirm("你确认要退出吗？", "温馨提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(async () => {
            //退出登录
            //1.清空pinia中存储的token以及个人信息
            tokenstore.removeToken();
            userStore.removeInfo();
            //2.跳转到登录页面
            await router.push("/login");
            ElMessage({
              type: "success",
              message: "退出登录",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "用户取消了退出登录",
            });
          });
      // 这里可以添加更多的退出逻辑，例如跳转到登录页面等
    }
  }
};
</script>

<template>
  <div class="user-profile">
    <strong class="user-name">欢迎用户：{{ userStore.info.username }}</strong>
    <el-dropdown placement="bottom-end" @command="handleCommand">
      <span class="avatar-box">
        <el-avatar
          :src="userStore.info.userPic ? userStore.info.userPic : avatar"
        />
        <el-icon>
          <CaretBottom />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="info" :icon="User"
            >基本资料</el-dropdown-item
          >
          <!--          <el-dropdown-item command="avatar" :icon="Crop"-->
          <!--            >更换头像</el-dropdown-item-->
          <!--          >-->
          <el-dropdown-item command="resetPassword" :icon="EditPen"
            >重置密码</el-dropdown-item
          >
          <el-dropdown-item command="logout" :icon="SwitchButton"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped>
.el-dropdown__box {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-icon {
  margin-left: 8px;
}

.user-profile {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 水平右对齐 */
}

.avatar-box {
  display: flex;
  align-items: center; /* 头像垂直居中 */
}
.user-name {
  margin-right: 10px; /* 可以根据需要调整用户名和头像之间的间距 */
  font-size: 16px; /* 调整用户名字体大小 */
  min-width: 100px;
}
</style>
